<template>
  <div class="shopMainbg">
    <div class="shopMain" id="shopmain">

      <!--今日推荐 -->

      <div class="am-g am-g-fixed recommendation">
        <div class="clock am-u-sm-3">
          <img src="@/assets/images/2016.png"/>
          <p>今日<br>推荐</p>
        </div>

        <div class="am-u-sm-4 am-u-lg-3" v-for="r in recommendProducts">
          <router-link :to="'/detail?pid='+r.productId">
          <div class="info">
            <h3>{{ r.productName }}</h3>
            <h4 >销量:{{r.soldNum}}</h4>
          </div>
          <div class="recommendationMain">
            <img :src="r.imgs[0].url"></img>
          </div>
          </router-link>
        </div>

      </div>
      <div class=" clear "></div>
      <!--热门活动 -->

      <div class=" am-container activity ">
        <div class=" shopTitle ">
          <h4>活动</h4>
          <h3>每期活动 优惠享不停 </h3>
          <span class=" more "><a class=" more-link " href=" # ">全部活动</a></span>
        </div>

        <div class=" am-g am-g-fixed ">
          <div class=" am-u-sm-3 ">
            <div class="icon-sale one"></div>
            <h4>秒杀</h4>
            <div class="activityMain">
              <img src="@/assets/images/activity1.jpg"></img>
            </div>
            <div class=" info ">
              <h3>春节送礼优选</h3>
            </div>
          </div>

          <div class="am-u-sm-3">
            <div class="icon-sale two"></div>
            <h4>特惠</h4>
            <div class=" activityMain ">
              <img src="@/assets/images/activity2.jpg"></img>
            </div>
            <div class=" info ">
              <h3>春节送礼优选</h3>
            </div>
          </div>

          <div class=" am-u-sm-3 ">
            <div class="icon-sale three"></div>
            <h4>团购</h4>
            <div class=" activityMain ">
              <img src="@/assets/images/activity3.jpg"/>
            </div>
            <div class=" info ">
              <h3>春节送礼优选</h3>
            </div>
          </div>

          <div class=" am-u-sm-3 last ">
            <div class=" icon-sale "></div>
            <h4>超值</h4>
            <div class=" activityMain ">
              <img src="@/assets/images/activity.jpg"/>
            </div>
            <div class=" info ">
              <h3>春节送礼优选</h3>
            </div>
          </div>

        </div>
      </div>
      <div class=" clear "></div>

      <!--甜点-->
      <div v-for="(rc,index) in recommendCategories">
        <div class=" am-container ">
          <div class=" shopTitle ">
            <h4>{{ rc.categoryName }}</h4>
            <h3>{{ rc.categorySlogan }}</h3>
            <div class="today-brands">
              <a href="# " v-for="c in rc.categories">{{c.categoryName}}</a>
            </div>
            <span class=" more ">
                    <a class=" more-link " href=" # ">更多美味</a>
                        </span>
          </div>
        </div>
        <div class=" am-g am-g-fixed floodOne ">
          <div class=" am-u-sm-5 am-u-md-3 am-u-lg-4 text-one ">
            <a href=" # ">
              <div class=" outer-con ">
                <div class=" title ">
                  零食大礼包开抢啦
                </div>
                <div class=" sub-title ">
                  当小鱼儿恋上软豆腐
                </div>
              </div>
              <img :src="rc.categoryPic"/>
            </a>
          </div>
          <div class=" am-u-sm-7 am-u-md-5 am-u-lg-4">
            <div class="text-two" v-if="rc.products.length>0">
              <div class="outer-con " >
                <div class="title">
                  {{rc.products[0].productName}}
                </div>
                <div class="sub-title">
                  销量:{{rc.products[0].soldNum}}
                </div>

              </div>
              <a href="# "><img :src="rc.products[0].imgs[0].url" v-if="rc.products[0].imgs[0]"/></a>
            </div>
            <div class="text-two last" v-if="rc.products.length>1">
              <div class="outer-con " >
                <div class="title ">
                  {{rc.products[1].productName}}
                </div>
                <div class="sub-title ">
                  销量:{{rc.products[1].soldNum}}
                </div>

              </div>
              <a href="# "><img :src="rc.products[1].imgs[0].url" v-if="rc.products[1].imgs[0]"/></a>
            </div>
          </div>
          <div class="am-u-sm-12 am-u-md-4 " >
            <div class="am-u-sm-3 am-u-md-6 text-three" v-if="rc.products.length>2">
              <div class="outer-con " >
                <div class="title ">
                  {{rc.products[2].productName}}
                </div>
                <div class="sub-title ">
                  销量:{{rc.products[2].soldNum}}
                </div>
              </div>
              <a href="# "><img :src="rc.products[2].imgs[0].url" v-if="rc.products[2].imgs[0]"/></a>
            </div>

            <div class="am-u-sm-3 am-u-md-6 text-three" v-if="rc.products.length>3">
              <div class="outer-con " >
                <div class="title ">
                  {{rc.products[3].productName}}
                </div>
                <div class="sub-title ">
                  {{rc.products[3].soldNum}}
                </div>
              </div>
              <a href="# "><img :src="rc.products[3].imgs[0].url" v-if="rc.products[3].imgs[0]"/></a>
            </div>

            <div class="am-u-sm-3 am-u-md-6 text-three" v-if="rc.products.length>4">
              <div class="outer-con " >
                <div class="title ">
                  {{rc.products[4].productName}}
                </div>
                <div class="sub-title ">
                  {{rc.products[4].soldNum}}
                </div>
              </div>
              <a href="# "><img :src="rc.products[4].imgs[0].url" v-if="rc.products[4].imgs[0]"/></a>
            </div>

            <div class="am-u-sm-3 am-u-md-6 text-three last " v-if="rc.products.length>5">
              <div class="outer-con " >
                <div class="title ">
                  {{rc.products[5].productName}}
                </div>
                <div class="sub-title ">
                  {{rc.products[5].soldNum}}
                </div>
              </div>
              <a href="# "><img :src="rc.products[5].imgs[0].url" v-if="rc.products[5].imgs[0]"/></a>
            </div>
          </div>

        </div>
        <div class="clear "></div>
      </div>

      <div class="footer ">
        <div class="footer-hd ">
          <p>
            <a href="# ">恒望科技</a>
            <b>|</b>
            <a href="# ">商城首页</a>
            <b>|</b>
            <a href="# ">支付宝</a>
            <b>|</b>
            <a href="# ">物流</a>
          </p>
        </div>
        <div class="footer-bd ">
          <p>
            <a href="# ">关于恒望</a>
            <a href="# ">合作伙伴</a>
            <a href="# ">联系我们</a>
            <a href="# ">网站地图</a>
            <em>© 2015-2025 Hengwang.com 版权所有</em>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getCategoryRecommendProducts, getRecommendProducts} from "@/api/main.js";

export default {
  name: "IndexMain",
  data() {
    return {
      recommendProducts: [],
      recommendCategories: []
    }
  },
  methods: {
    getProductName(index){
      const obj=this.recommendCategories[index].products
      console.log(typeof obj)
      return obj
    }
  },
  created() {
    getRecommendProducts().then(data => {
      const res = data.data;
      if (res.success) {
        this.recommendProducts = res.data;
      } else {
        this.$message({message: res.msg, type: 'warning', showClose: true})
      }
    }).catch(error => {
      this.$message(error)
    });
    getCategoryRecommendProducts().then(data => {
      const res = data.data;
      if (res.success) {
        this.recommendCategories = res.data;
      } else {
        this.$message({message: res.msg, type: 'warning', showClose: true})
      }
    }).catch(error => {
      this.$message(error)
    })

  },
  watch:{
    recommendCategories:{
      handler:function(val,oldVal){
        this.recommendCategories = val;
      },
      deep:true
    }

  }

}
</script>

<style scoped>
</style>